<template>
  <div>
    <!--<div>-->
    <div class="weui-search-bar" id="search_bar">
      <div class="weui-search-bar__form">
        <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input type="search" ref="searchInput0" class="weui-search-bar__input" placeholder="请输入拍品名称/店铺/专场" autocomplete="off" v-model="keyword" @input="searchKeyword" @keyup="searchEnter($event)" @blur="searchEnter({keyCode:13})"/>
          <a href="javascript:" class="weui-icon-clear" id="search_clear" @click="clearKeyword"></a>
        </div>
      </div>
      <a href="javascript:" class="weui-search-bar__cancel-btn" id="search_cancel" @click="goBack">取消</a>
    </div>

    <div class="search-box">
      <div class="search-record">
        <h3>热门搜索</h3>
        <ul>
          <li v-for="(v,k) in hotSearchList" :key="k" @click="clickSearch(v.type,v.keyword)">{{v.keyword}}</li>
        </ul>
      </div>

      <div class="search-record">
        <h3>朝代分类</h3>
        <ul>
          <li v-for="(v,k) in dynastyList" :key="k" @click="clickSearch(dynastyVal,v.name)">{{v.name}}</li>
        </ul>
      </div>

      <div class="search-history">
        <div class="history-title">
          <h3>历史搜索</h3>
          <span class="icon icon-delete" @click="clearHistoryAll"></span>
        </div>
        <ul>
          <li v-for="(v,k) in historySearchList" :key="k">
            <span @click="clickSearch(v.type,v.keyword)">{{v.keyword}}</span>
            <i class="icon icon-close" @click="clearHistory(k)"></i>
          </li>
        </ul>
      </div>
    </div>



    <!--</div>-->



  </div>
</template>

<script>
  import {getStatusMapByKey,setlocalStore,getlocalStore,removelocalStore} from '../../assets/js/tools';
  import {getSearchWordInfo,getALLDynastyList} from '../../assets/js/getData';
  export default {
    name: "search",
    data(){
      return {
        keyword:'',
        type:null,//搜索关键词类型
        hotSearchList:[],//热门搜索
        dynastyList:[],//朝代列表
        historySearchList:[],//历史搜索列表


        productVal:null,
        shopVal:null,
        specialVal:null,
        dynastyVal:4
      }
    },

    created(){
      this.productVal = getStatusMapByKey('eFollowesType')['product'].val;//1
      this.shopVal = getStatusMapByKey('eFollowesType')['shop'].val;//2
      this.specialVal = getStatusMapByKey('eFollowesType')['special'].val;//3

      this.type = this.productVal;

      //获取历史记录
      let historySearchList = getlocalStore('historySearch');
      if(historySearchList){
        this.historySearchList = JSON.parse(historySearchList);
      }

      //获取热门搜索词
      getSearchWordInfo({
        pageNum:1,
        pageSize:10
      }).then(res => {
        if(res.data.reqResult.code>0){
          this.hotSearchList = res.data.data;
        }else {
          Toast(res.data.reqResult.msg);
        }
      });

      //获取所有朝代分类
      getALLDynastyList().then(res => {
        if(res.data.reqResult.code>0){
          this.dynastyList = res.data.data;
        }else {
          Toast(res.data.reqResult.msg);
        }
      });

    },
    methods:{
      //搜索
      searchKeyword(){
        if(!this.keyword){
          return;
        }
        this.$router.push({name:'searchResult',query:{keyword:this.keyword,type:this.type,isFocus:true}});
      },
      //点击历史记录/点击热门搜索/点击朝代分类
      clickSearch(type,v){
        this.keyword = v;
        this.type = type;
        this.$router.push({name:'searchResult',query:{keyword:this.keyword,type:this.type}});
      },
      //手机搜索键
      searchEnter(e){
        // if(e.keyCode == 13&&this.keyword){
        //   this.$refs.searchInput0.blur();
        //   this.$router.push({name:'searchResult',query:{keyword:this.keyword,type:this.type}});
        // }
      },
      //清空所有历史记录
      clearHistoryAll(){
        this.historySearchList = [];
        removelocalStore('historySearch');
      },
      //删除单条历史记录
      clearHistory(k){
        this.historySearchList.splice(k, 1);
        setlocalStore('historySearch',this.historySearchList);
      },

      //清空输入框
      clearKeyword(){
        this.keyword = '';
        // this.$router.push({name:'search'});
      },
      //取消返回首页
      goBack(){
        this.$router.replace({name:'home'});
      },
    }
  }
</script>

<style scoped>
  .weui-search-bar{
    background-color: #ffffff;
    align-items: center;
    padding: 0.4rem 1rem;
  }
  .weui-search-bar__box{
    border: 1px solid #cccccc;
    border-radius: 5px;
  }
  .weui-search-bar__cancel-btn{
    display: block;
    background-color: #ccc;
    color: #fff;
    padding: 0 0.25rem;
    border-radius: 3px;
    line-height: 1.25rem;
    height: 1.25rem;
  }
  .search-box{
    background-color: #ffffff;
    padding: 0.75rem 1rem;
  }
  .search-record{
    margin-bottom: 1.25rem;
  }
  .search-record ul{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    /*overflow: auto;*/
  }
  .search-record li{
    background-color: #cccccc;
    padding: 0.1rem 0.4rem;
    color: #ffffff;
    border-radius: 3px;
    margin-right: 0.75rem;
    flex-shrink: 0;
    margin-top: 0.75rem;
  }
  .search-history ul{
    margin-top: 0.4rem;
  }
  .search-history li{
    height: 2rem;
    line-height: 2rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .search-history li:after{
    content: " ";
    position: absolute;
    left: -1rem;
    bottom: 0;
    right: -1rem;
    height: 1px;
    border-top: 1px solid #F2F2F2;
    transform-origin: 0 0;
    transform: scaleY(0.5);
    z-index: 2;
  }
  .search-history li span{
    color: #656565;
    font-size: 0.7rem;
  }
  .search-history li .icon-close{
    color: #989898;
    font-size: 0.6rem;
  }
  .search-show .nav{
    display: flex;
    justify-content: space-around;
    padding: 0.25rem 0 0.5rem 0;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
  }
  .search-show .nav li{
    height: 1.75rem;
    line-height: 1.75rem;
    padding: 0 0.5rem;
    box-sizing: border-box;
  }
  .search-show .nav li.active{
    border-bottom: 2px solid #c50000;
  }
  .search-show .weui-cell_primary{
    display: flex;
    justify-content: space-between;
  }
  .result-list{
    border-bottom: 1px solid #e5e5e5;
  }
  .result-list .weui-cell{
    padding: 0.7rem 1.1rem;
  }
  .result-list .weui-cell:before{
    left: 0;
  }
  .result-list .weui-cell__bd p:first-child{
    color: #656565;
    font-size: 0.7rem;
  }
  .result-list .weui-cell__bd p:last-child{
    color: #989898;
    font-size: 0.6rem;
  }
  .history-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .history-title .icon-delete{
    font-size: 0.8rem;
  }
</style>
